<template>
    <u-popup closeable bgColor="transparent" :show="skuPop" @close="skuPop = false">
        <view class="sku-pop">
            <view class="title">
                选择规格
            </view>
            <view class="content-box">
                <view class="left">
                    <u-image width="170rpx" height="155rpx" v-if="selectSku && selectSku.pic && selectSku.pic !=='' " :src="checkAndFixUrl(selectSku.pic)"></u-image>
                    <u-image width="170rpx" height="155rpx" v-else :src="checkAndFixUrl(productInfo.cover)"></u-image>
                </view>
                <view class="right">
                    <view class="com-title">
                        <text>￥</text>
                        <text class="price" v-if="selectSku">{{ selectSku.price }}</text>
                        <text class="price" v-else>{{ productInfo.price }}</text>
                    </view>
                    <view class="sku-box">购买数量：{{quantity}}件</view>
                    <view class="count-box" v-if="selectSku">规格：{{ selectSku?.attr_name ?? '' }}</view>
                </view>
            </view>

            <view class="sku-select-box" v-for="(attr, index) in productAttrs" :key="index">
                <view class="sku-tip">{{ attr.name }}</view>
                <view class="sku-list">
                    <view :class="['sku-item', isItemSelected(index , i) ? 'active' : '']" v-for="(item, i) in attr.values" :key="i" @tap="currentChange(index, i)">
                        {{ item }}
                    </view>
                </view>
            </view>


            <view class="sku-select-box pay-number">
                <view class="sku-tip">购买数量</view>
                <view class="sku-num">
                    <u-number-box min="1" v-model="quantity"></u-number-box>
                </view>
            </view>
            <view class="confirm-btn">
                <u-button throttleTime="1000" :customStyle="{height: '80rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="confirmPayment">确认</u-button>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
    import { ref } from 'vue'
    import {checkAndFixUrl} from "@/utils/tool";
    import Style from "@/uni_modules/uview-plus/libs/mixin/style";

    const emit = defineEmits(['confirmSku'])

    const props = defineProps({
        // 商品属性
        productAttrs: {
            type: Array,
            default: []
        },
        // 商品规格
        productSkus: {
            type: Array,
            default: []
        },
        // 商品信息
        productInfo: {
            type: Array,
            default: []
        },
    })

    const skuPop = ref(false)
    // 选择的规格
    const skuCurrent = ref([]);

    // 规格切换
    const currentChange = (index, i) => {
        // 更新选中状态
        skuCurrent.value[index] = i;
        console.log('选中的规格', skuCurrent.value)

        let chooseSku = getMatchingSKU(skuCurrent.value)
        if (chooseSku) {
            selectSku.value = chooseSku
        }
    }

    // 是否选中
    const isItemSelected = (index, i) => {
        return skuCurrent.value[index] == i;
    }

    // 根据选择的属性值获取匹配的SKU
    const getMatchingSKU = () => {
        // 判断是否全部选择
        if (skuCurrent.value.length !== props.productAttrs.length) {
            return null;
        }

        // 构建匹配函数
        const matchingSKU = props.productSkus.find(sku => {
            return skuCurrent.value.every((value, index) => sku.variants[index] === value);
        });

        return matchingSKU || null;
    };

    // 确认
    const confirmPayment = () => {
        if (!selectSku.value) {
            uni.showToast({
                mask: true,
                title: '请选择规格!',
                icon: 'none'
            })
            return
        }

        skuPop.value = false
        emit('confirmSku', {sku: selectSku.value, quantity: quantity.value })
    }

    const open = () => {
        skuPop.value = true
    }

    // 选择的规格
    const selectSku = ref(null)
    // 数量
    const quantity = ref(1)

    defineExpose({ open })
</script>

<style lang="scss" scoped>
.sku-pop {
    background: #FFFFFF;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    padding: 40rpx 40rpx 52rpx;
    .title {
        font-size: 32rpx;
        color: #222222;
        text-align: center;
        margin-bottom: 50rpx;
    }
    .content-box {
        @include between(100%, 100%);
        margin-bottom: 70rpx;
        .right {
            flex: 1;
            margin-left: 22rpx;
            @include between(100%, 170rpx);
            flex-direction: column;
            align-items: flex-start;
            // padding: 10rpx 0;
            color: #000000;
            font-size: 30rpx;
            .com-title {
                color: #F55726;
                font-size: 28rpx;
                .price {
                    font-weight: bold;
                    font-size: 50rpx;
                }
            }
        }
    }
    .sku-select-box {
        margin-bottom: 40rpx;
        .sku-tip {
            color: #333333;
            font-size: 30rpx;
            margin-bottom: 30rpx;
        }
        .sku-list {
            @include start();
            flex-wrap: wrap;
            .sku-item {
                padding: 20rpx 26rpx;
                background: #EBEBEB;
                border-radius: 20rpx;
                color: #333333;
                font-size: 30rpx;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                border: 1rpx solid #EBEBEB;
            }
            .active {
                background: #E8EBF6;
                border: 1rpx solid #516DDB;
            }
        }
    }
    .pay-number {
        margin-top: 50rpx;
        @include between(100%);
    }
    .confirm-btn {
        margin-top: 60rpx;
    }
}
</style>
